@import './mixins/mixins.scss';
@import './common/var.scss';

@include b(radio){
  display: inline-block;
  position: relative;
  cursor: pointer;
  white-space: nowrap;
  outline: 0;
  font-size: $--radio-default-font-size;
  color: $--radio-default-font-color;
  font-weight: $--radio-default-font-weight;
  line-height: $--radio-default-line-height;
  margin-right: $--radio-default-margin-right;

  &:last-child{
    margin-right: 0;
  }

  @include when(checked){
    @include s(radio,inner){
      border-color: $--radio-checked-inner-border-color;
      background-color: $--radio-checked-inner-background-color;
      &::after{
        -webkit-transform: translate(-50%,-50%) scale(1);
        transform: translate(-50%,-50%) scale(1);
      }
    }
    @include s(radio,label){
      color: $--radio-checked-label-font-color;
    }
  }

  @include when(disabled){
    cursor: not-allowed;
    @include s(radio,input){
      cursor: not-allowed;
      @include s(radio,inner){
        cursor: not-allowed;
        border-color: $--radio-disabled-inner-border-color;
        background-color: $--radio-disabled-inner-background-color;
        &::after{
          cursor: not-allowed;
          background-color: $--radio-disabled-inner-after-background-color;
        }
      }
    }
    
    @include s(radio,label){
      cursor: not-allowed;
      color: $--radio-disabled-label-font-color;
    }
  }

  @include when(border){
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: $--radio-border-padding;
    border-radius: $--radio-border-border-radius;
    border: $--radio-border-border;
    height: $--radio-border-height;

    &.is-checked{
      border-color: $--radio-border-checked-border-color;
    }

    &.is-disabled{
      border-color:$--radio-border-disabled-border-color;
    }

    &.ml-radio-medium{
      padding: $--radio-size-medium-padding;
      border-radius: $--radio-size-medium-border-radius;
      height: $--radio-size-medium-height;
      font-size: $--radio-size-medium-font-size;
    }

    &.ml-radio-small{
      padding: $--radio-size-small-padding;
      border-radius: $--radio-size-small-border-radius;
      height: $--radio-size-small-height;
      font-size: $--radio-size-small-font-size;
    }

    &.ml-radio-mini{
      padding: $--radio-size-mini-padding;
      border-radius: $--radio-size-mini-border-radius;
      height: $--radio-size-mini-height;
      font-size: $--radio-size-mini-font-size;
    }
  }
}

@include s(radio,input){
  position: relative;
  display: inline-block;

  white-space: nowrap;
  cursor: pointer;
  outline: 0;
  line-height: $--radio-default-line-height;
  vertical-align: middle;
}

@include s(radio,inner){
  position: relative;
  display: inline-block;

  border: $--radio-default-inner-border;
  border-radius: $--radio-default-inner-border-radius;
  width: $--radio-default-inner-width;
  height: $--radio-default-inner-height;
  background-color: $--radio-default-inner-background-color;
  cursor: pointer;
  box-sizing: border-box;

  &::after{
    width: $--radio-checked-inner-after-width;
    height: $--radio-checked-inner-after-height;
    border-radius: 100%;
    background-color: $--radio-checked-inner-after-background-color;
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%) scale(0);
    transform: translate(-50%,-50%) scale(0);
    -webkit-transition: -webkit-transform .15s ease-in;
    transition: -webkit-transform .15s ease-in;
    transition: transform .15s ease-in;
    transition: transform .15s ease-in,-webkit-transform .15s ease-in;
  }
}

@include s(radio,original){
  opacity: 0;
  outline: 0;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
}

@include s(radio,label){
  padding-left: $--radio-default-label-padding-left;
}